<template>
  <div class="container">
    <el-card shadow="always" :body-style="{ padding: '20px' }">
      <div slot="header">
        <div class="addbtn">
          <el-button type="success" size="small" icon="el-icon-edit" @click="$router.push('/questions/new')">新增试题</el-button>
        </div>
        <el-form :model="form" ref="form" label-width="70px" :inline="true" size="normal">
          <el-form-item label="学科">
            <el-select v-model="form.subjectID" placeholder="请选择" filterable @change="subjectChange">
              <el-option v-for="item in subjectList" :key="item.id" :label="item.subjectName" :value="item.id"> </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="二级目录">
            <el-select v-model="form.catalogID" placeholder="请选择" filterable>
              <el-option v-for="item in directorysList" :key="item.id" :label="item.directoryName" :value="item.id"> </el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="标签">
            <el-select v-model="form.tags" placeholder="请选择" filterable>
              <el-option v-for="item in tagsList" :key="item.id" :label="item.tagName" :value="item.id"> </el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="关键字">
            <el-input v-model="form.keyword" placeholder="根据题干搜索"></el-input>
          </el-form-item>

          <el-form-item label="试题类型">
            <el-select v-model="form.questionType" placeholder="请选择" filterable>
              <el-option v-for="item in questionType" :key="item.value" :label="item.label" :value="item.value"> </el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="难度">
            <el-select v-model="form.difficulty" placeholder="请选择" filterable>
              <el-option v-for="item in difficulty" :key="item.value" :label="item.label" :value="item.value"> </el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="方向">
            <el-select v-model="form.direction" placeholder="请选择" filterable>
              <el-option v-for="(item, index) in direction" :key="index" :label="item" :value="item"> </el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="录入人">
            <el-select v-model="form.creatorID" placeholder="请选择" filterable>
              <el-option v-for="item in userList" :key="item.id" :label="item.username" :value="item.id"> </el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="题目备注">
            <el-input v-model="form.remarks"></el-input>
          </el-form-item>

          <el-form-item label="企业简称">
            <el-input v-model="form.shortName"></el-input>
          </el-form-item>

          <el-form-item label="城市" class="citys">
            <el-select v-model="city" placeholder="请选择" filterable @change="cityChange" class="city">
              <el-option v-for="item in provinces" :key="item" :label="item" :value="item"> </el-option>
            </el-select>
          </el-form-item>
          <el-form-item class="city">
            <el-select v-model="form.city" placeholder="请选择" filterable class="city">
              <el-option v-for="item in cityList" :key="item" :label="item" :value="item"> </el-option>
            </el-select>
          </el-form-item>

          <el-form-item class="sousuo">
            <el-button size="small" @click="reset">清除</el-button>
            <el-button size="small" type="primary" @click="getQuestionList">搜索</el-button>
          </el-form-item>
        </el-form>
      </div>
      <!-- card body -->
      <!-- 标签页 -->
      <el-tabs v-model="check" @tab-click="getQuestionList()">
        <el-tab-pane label="全部" name="0"></el-tab-pane>
        <el-tab-pane label="审核中" name="1"></el-tab-pane>
        <el-tab-pane label="已审核" name="2"></el-tab-pane>
        <el-tab-pane label="已拒绝" name="3"></el-tab-pane>
      </el-tabs>
      <!-- 列表区域 -->
      <el-alert :title="`数据一共${count}条`" type="info" :closable="false" show-icon :style="{ marginBottom: '20px' }"> </el-alert>
      <el-table :data="questionList" border style="width: 100%">
        <el-table-column prop="number" label="试题编号" width="150"> </el-table-column>
        <el-table-column prop="subject" label="学科" width="150"> </el-table-column>
        <el-table-column prop="catalog" label="目录" width="120"> </el-table-column>
        <el-table-column label="题型" width="150">
          <template slot-scope="scope">
            <span v-if="scope.row.questionType == 1">单选</span>
            <span v-if="scope.row.questionType == 2">多选</span>
            <span v-if="scope.row.questionType == 3">简答</span>
          </template>
        </el-table-column>
        <el-table-column label="题干" width="300">
          <template slot-scope="scope">
            <div v-html="scope.row.question"></div>
          </template>
        </el-table-column>
        <el-table-column label="录入时间" width="300">
          <template slot-scope="scope">
            {{ scope.row.addDate | parseTimeByString }}
          </template>
        </el-table-column>
        <el-table-column label="难度" width="120">
          <template slot-scope="scope">
            <span v-if="scope.row.difficulty == 1">简单</span>
            <span v-if="scope.row.difficulty == 2">一般</span>
            <span v-if="scope.row.difficulty == 3">困难</span>
          </template>
        </el-table-column>
        <el-table-column prop="creator" label="录入人" width="120"> </el-table-column>
        <el-table-column label="审核状态" width="120">
          <template slot-scope="scope">
            <span v-if="scope.row.chkState == 0">待审核</span>
            <span v-if="scope.row.chkState == 1">已审核</span>
            <span v-if="scope.row.chkState == 2">已拒绝</span>
          </template>
        </el-table-column>
        <el-table-column prop="chkRemarks" label="审核意见" width="120"> </el-table-column>
        <el-table-column prop="chkUser" label="审核人" width="120"> </el-table-column>
        <el-table-column label="发布状态" width="120">
          <template slot-scope="scope">
            <span v-if="scope.row.publishState">已发布</span>
            <span v-else>待发布</span>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="250" fixed="right">
          <template slot-scope="scope">
            <el-button type="text" @click="look(scope.row)">预览</el-button>
            <el-button type="text" :disabled="scope.row.chkState !== 0" @click="choiceChecked(scope.row.id)">审核</el-button>
            <el-button type="text" @click="$router.push('/questions/new?id=' + scope.row.id)" :disabled="scope.row.chkState == 1">修改</el-button>
            <el-button type="text" @click="publishChange(scope.row)">{{ scope.row.publishState ? '下架' : '上架' }}</el-button>
            <el-button type="text" @click="del(scope.row.id)" :disabled="scope.row.chkState == 1">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页器 -->
      <el-pagination
        @size-change="sizeChange"
        :page-size="form.pagesize"
        @current-change="pageChange"
        background
        layout="sizes, prev, pager, next, jumper, ->, total, slot"
        :total="count"
        :page-sizes="[5, 10, 15, 20]"
      >
      </el-pagination>
      <!-- 预览弹框 -->
      <el-dialog title="题目预览" :visible.sync="dialogShow" width="50%">
        <questions-preview :info="lookInfo" v-if="dialogShow" />
        <span slot="footer">
          <el-button type="primary" @click="dialogShow = false">关闭</el-button>
        </span>
      </el-dialog>

      <!-- 审核弹框 -->
      <el-dialog
        title="题目审核"
        :visible.sync="checkedShow"
        width="30%"
        @close="
          checkedInfo = {
            id: '',
            chkState: 1,
            chkRemarks: ''
          }
        "
      >
        <questions-check :info="checkedInfo" v-if="checkedShow"></questions-check>
        <span slot="footer">
          <el-button @click="checkedShow = false">取消</el-button>
          <el-button type="primary" @click="checkedSubmit">确认</el-button>
        </span>
      </el-dialog>
    </el-card>
  </div>
</template>

<script>
import { list as subjectlist } from '@/api/hmmm/directorys.js'
import { choice, choicePublish, choiceCheck, remove } from '@/api/hmmm/questions.js'
import { provinces, citys } from '@/api/hmmm/citys.js'
import { list as tagslist } from '@/api/hmmm/tags.js'
import { questionType, direction, difficulty } from '@/api/hmmm/constants.js'
import { parseTimeByString } from '@/filters'
import { mapState } from 'vuex'
import questionsPreview from '../components/questions-preview.vue'
import QuestionsCheck from '../components/questions-check.vue'
let defaultForm = {
  page: 1,
  pagesize: 5,
  subjectID: null,
  difficulty: null,
  questionType: null,
  tags: null,
  province: null,
  city: null,
  keyword: null,
  remarks: null,
  shortName: null,
  direction: null,
  creatorID: null,
  catalogID: null,
  chkState: ''
}
export default {
  components: { questionsPreview, QuestionsCheck },
  data() {
    return {
      form: {
        ...defaultForm
      },
      // 二级目录列表
      directorysList: [],
      // 标签列表
      tagsList: [],
      // 试题类型
      questionType,
      // 难度
      difficulty,
      // 方向
      direction,
      // 城市列表
      cityList: [],
      // 一级城市
      city: '',
      // 表格数据
      questionList: [],
      // 总数
      count: 0,
      // 预览弹框
      dialogShow: false,
      // 预览信息
      lookInfo: {},
      // tab切换
      check: '0',
      // 审核弹框
      checkedShow: false,
      // 审核信息对象
      checkedInfo: {
        id: '',
        chkState: 1,
        chkRemarks: ''
      }
    }
  },
  filters: {
    parseTimeByString: parseTimeByString
  },
  computed: {
    ...mapState({
      subjectList: state => state.subject.subjectList,
      userList: state => state.subject.userList
    }),
    // 城市数据
    provinces
  },
  created() {
    this.subjectList || this.$store.dispatch('getSubject', { pagesize: 100 })
    this.userList || this.$store.dispatch('getUser', { pagesize: 100 })
    this.getQuestionList()
  },
  methods: {
    async subjectChange(val) {
      try {
        // 获取二级目录列表
        let { data: res } = await subjectlist({
          subjectID: val,
          pagesize: 100
        })

        this.directorysList = res.items
        // 获取标签列表
        let { data: result } = await tagslist({
          subjectID: val,
          pagesize: 100
        })

        this.tagsList = result.items
      } catch (error) {
        console.log('获取失败')
      }
    },
    // 重置功能
    reset() {
      this.form = {
        ...defaultForm
      }
      this.city = ''
    },
    // 城市变化
    cityChange(val) {
      this.cityList = citys(val)
    },
    // 获取题库列表
    async getQuestionList() {
      if (this.check == 0) {
        this.form.chkState = null
      } else {
        this.form.chkState = this.check - 1
      }
      try {
        let { data: res } = await choice(this.form)
        this.questionList = res.items
        this.count = res.counts
      } catch (error) {
        console.log('获取失败')
      }
    },
    // 预览事件
    look(row) {
      console.log(row)
      this.lookInfo = row
      this.dialogShow = true
    },
    sizeChange(val) {
      this.form.pagesize = val
      this.form.page = 1
      this.getQuestionList()
    },
    pageChange(val) {
      this.form.page = val
      this.getQuestionList()
    },

    // 删除
    async del(id) {
      await this.$confirm('此操作将永久删除该题目, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'info'
      })
      await remove({ id })
      // 判断当前是否时最后一条数据
      if (this.questionList.length == 1 && this.form.page !== 1) {
        this.form.page--
      }
      this.getQuestionList()
    },
    // 上下架功能
    async publishChange(row) {
      let publishState = 0
      try {
        if (row.publishState) {
          await this.$confirm('您确认下架这道题目吗?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'info'
          })
          publishState = 0
        } else {
          await this.$confirm('您确认上架这道题目吗?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'info'
          })
          publishState = 1
        }
        await choicePublish({
          id: row.id,
          publishState
        })
        row.publishState = !row.publishState
      } catch (error) {
        console.log('取消操作')
      }
    },
    // 审核功能
    async choiceChecked(id) {
      this.checkedInfo.id = id
      this.checkedShow = true
    },
    // 审核提交
    async checkedSubmit() {
      await choiceCheck(this.checkedInfo)
      this.checkedShow = false
      this.getQuestionList()
    }
  }
}
</script>

<style scoped>
.el-form-item {
  width: 25%;
  margin-right: 0;
}
.el-input,
.el-input__inner,
.el-option,
.el-select {
  width: 330px;
  height: 25px;
}
.city {
  width: 150px;
  height: 25px;
}
.citys {
  width: 220px;
  margin-right: 10px;
}
.sousuo {
  text-align: center;
}
.addbtn {
  padding-right: 25px;
  text-align: right;
  height: 50px;
}
</style>
